import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
import Layout from '@/layout/Index.vue'

export const constantRoutes: Array<RouteRecordRaw> = [
  {
    path: '/',
    component: Layout,
    redirect: '/dashboard',
    children: [
      {
        path: '/dashboard',
        component: () => import('@/layout/dashboard/Index.vue'),
        name: 'dashboard',
        meta: {
          title: '首页',
          icon: '#icondashboard'
        }
      }
    ]
  },
  {
    path: '/login',
    name: 'login',
    component: () => import('@/views/login/login.vue'),
  }
]

// 把routes的类型引入进来，已知routes的类型是vue已经配置好的，直接引入就可以
// 而且是一个数组类型的泛型
const routes: Array<RouteRecordRaw> = [
  // 登录模块
  {
    path: '/login',
    component: () => import('@/views/login/login.vue'),
    name: 'login'
  },
  // 首页的面板模块，主路由是layout，然后子路由是dashboard
  // layout就是一个整体的布局，左侧菜单，顶部header，以及主体部分中的tabs栏
  // 然后它内部有一个路由的出口<router-view></router-view>
  {
    path: '/',
    component: Layout,
    redirect: '/dashboard',
    children: [
      {
        path: '/dashboard',
        component: () => import('@/layout/dashboard/Index.vue'),
        name: 'dashboard',
        meta: {
          title: '首页',
          icon: '#icondashboard'
        }
      }
    ]
  },
  // 系统管理的模块
  {
    path: "/system",
    component: Layout,
    name: "system",
    meta: {
      title: "系统管理",
      icon: "el-icon-menu",
      roles: ["sys:manage"],
      parentId: 0,
    },
    children: [
      {
        path: "/department",
        component: () => import('@/views/system/department/department.vue'),
        name: "department",
        meta: {
          title: "机构管理",
          icon: "el-icon-document",
          roles: ["sys:dept"]
        },
      },
      {
        path: "/userList",
        component: () => import('@/views/system/User/UserList.vue'),
        name: "userList",
        meta: {
          title: "用户管理",
          icon: "el-icon-s-custom",
          roles: ["sys:user"]
        },
      },
      {
        path: "/roleList",
        component: () => import('@/views/system/Role/RoleList.vue'),
        name: "roleList",
        meta: {
          title: "角色管理",
          icon: "el-icon-s-tools",
          roles: ["sys:role"]
        },
      },
      {
        path: "/menuList",
        component: () => import('@/views/system/Menu/MenuList.vue'),
        name: "menuList",
        meta: {
          title: "权限管理",
          icon: "el-icon-document",
          roles: ["sys:menu"]
        },
      },
    ],
  },
  {
    path: "/goods",
    component: Layout,
    name: "goods",
    meta: {
      title: "商品管理",
      icon: "el-icon-document",
      roles: ["sys:goods"]
    },
    children: [
      {
        path: "/goodCategory",
        component: () => import('@/views/goods/goodsCategory/goodsCategoryList.vue'),
        name: "goodCategory",
        meta: {
          title: "商品分类",
          icon: "el-icon-document",
          roles: ["sys:goodsCategory"]
        },
      },
    ],
  },
  {
    path: "/systenConfig",
    component: Layout,
    name: "systenConfig",
    meta: {
      title: "系统工具",
      icon: "el-icon-document",
      roles: ["sys:systenConfig"]
    },
    children: [
      {
        path: "/document",
        component: () => import('@/views/system/config/systemDocument.vue'),
        name: "http://42.193.158.170:8089/swagger-ui/index.html",
        meta: {
          title: "接口文档",
          icon: "el-icon-document",
          roles: ["sys:document"]
        },
      },
    ],
  }
]

// 声明路由的方式和vue2有很大的区别  这里是一些参考性的文档
// https://router.vuejs.org/zh/guide/migration/index.html#%E7%A0%B4%E5%9D%8F%E6%80%A7%E5%8F%98%E5%8C%96
const router = createRouter({
  history: createWebHistory(),
  // 这种方式是直接把原有的全部路由都暴露出去
  // 所有路由都写在了一个集合里面，不用做路由的切换时用的写法
  // routes
  // 这第二种写法就是进行路由拆分，动态获取路由的写法，可以同时引入其他的路由
  routes: constantRoutes
})

export default router